<template>
	<view>
		<view class="subsection">
			<!-- <u-tabs :list="tabList" :is-scroll="false" active-color="#e41876" :current="current" @change="sectionChange"></u-tabs> -->
			<u-subsection :list="tabList" :current="current" active-color="#e41876" @change="sectionChange"></u-subsection>
		</view>
		<view class="emptys" v-if="isEmpty">
			<u-empty text="暂未发布素材" mode="list"></u-empty>
		</view>
		<view class="material-list" >
			<view class="item" v-for="(item,index) in materialList" :key="index">
<!-- 				<view class="left">
					<view class="avatar">
						<image :src="item.user.avatar ? baseUrl+item.user.avatar : '/static/images/default-avatar.png'" mode="aspectFill"></image>
					</view>
				</view> -->
				<view class="right">
					<!-- <view class="nickname">{{item.user.nickname}}</view> -->
					<view class="content"><text>{{item.content}}</text></view>
					<view class="img-list" v-if="item.images.length > 0">
						<view class="img" :class="{'one':item.images.length == 1,'four':item.images.length == 4}" v-for="(img,i) in item.images" 
						:style="{'background-image': 'url('+baseUrl+img+')'}">
							<image v-if="item.price > 0 && item.is_buy" :src="baseUrl+img" mode="aspectFill"></image>
						</view>
					</view>
					<view class="video" v-if="item.video && item.type != 3">
						<video :poster="baseUrl+item.cover" :src="baseUrl+item.video"></video>
					</view>
					<view class="goods" v-if="item.video && item.type == 3">
						<view class="cover" @click="goVideoDetail(item.id)">
							<image :src="baseUrl+item.cover" mode="aspectFill"></image>
							<image src="../../../static/images/play.png" class="play"></image>
						</view>
						<view class="relation" v-if="item.goods_id">
							#{{item.goods.goods_name}}# <text>￥{{item.goods.shop_price}}</text>
						</view>
					</view>
				</view>
				<view class="zkop">
					<view class="audit">
						<u-tag text="通过" size="default" type="success" v-if="item.is_audit == 1"/>
						<u-tag text="不通过" size="default" type="error" v-if="item.is_audit == 2"/>
						<u-tag text="待审核" size="default" type="info" v-if="item.is_audit == 0"/>
					</view>
					<view class="boaudit" v-if="item.is_audit == 2">{{item.audit_reason}}</view>
					<view class="price">
						<u-tag :text="parseFloat(item.price)+'积分'" size="default" type="warning"/>
					</view>
					<view class="record">
						<u-tag :text="item.buy_count+'次购买'" size="default" type="info"/>
					</view>
					<view class="edit" @click="edit(item)">
						<u-tag text="编辑素材" size="default" type="info" mode="dark"/>
					</view>
					<view class="del" @click="del(item,index)">
						<u-tag text="删除素材" size="default" type="info" mode="dark"/>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.config.baseUrl,
				tabList: [
					{
						is_audit:'',
						name: '全部'
					}, 
					{
						is_audit:0,
						name: '待审核'
					}, 
					{
						is_audit:1,
						name: '已通过'
					},
					{
						is_audit:2,
						name: '已拒绝'
					}
				],
				current: 0,
				materialList:[],
				where:{
					page:1,
					limit:10,
					is_audit:''
				},
				isEmpty:false
			}
		},
		onLoad() {
			let that = this
			this.getMaterialList()
			uni.$on('updateMaterialList',function(){
				that.materialList = []
				that.where.page = 1
				that.getMaterialList()
			})
		},
		onPullDownRefresh() {
			this.materialList = []
			this.where.page = 1
			this.getMaterialList()
		},
		onReachBottom() {
			this.where.page++
			this.getMaterialList()
		},
		methods: {
			sectionChange(index) {
				this.current = index;
				this.materialList = []
				this.where.page = 1
				this.where.is_audit = this.tabList[index].is_audit
				this.getMaterialList()
			},
			getMaterialList(){
				this.$u.get('material/api.index/self',this.where).then(res => {
					this.materialList = this.materialList.concat(res.data)
					if(this.materialList.length == 0){
						this.isEmpty = true
					}else{
						this.isEmpty = false
					}
				})
			},
			edit(item){
				uni.navigateTo({
					url:'/pages/material/release/index?id='+item.id
				})
			},
			del(item,index){
				let that = this
				uni.showModal({
					title:'提示',
					content:'是否要删除该素材？',
					success(e) {
						if(e.confirm){
							that.$u.get('material/api.index/delete',{id:item.id}).then(res => {
								that.$u.toast(res.msg);
								that.materialList.splice(index,1)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#fff;
	}
	.subsection{
		padding: 20rpx;
	}
	.material-list{
		margin: 0rpx 20rpx 20rpx 20rpx;
		.item{
			display: flex;
			border-bottom: 1px solid #F1F1F1;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			// .left{
			// 	width: 100rpx;
			// 	.avatar{
			// 		image{
			// 			width: 80rpx;
			// 			height: 80rpx;
			// 			border-radius: 14rpx;
			// 		}
			// 	}
			// }
			.zkop{
				width: 150rpx;
				text-align: center;
				font-size: 26rpx;
				margin-left: 50rpx;
				.audit{

				}
				.boaudit{
					color: #FF0000;
					margin-top: 10rpx;
				}
				.price{
					margin-top: 20rpx;
				}
				.edit{
					margin-top: 20rpx;
				}
				.del{
					margin-top: 20rpx;
				}
				.record{
					margin-top: 20rpx;
				}
			}
			.right{
				width: 510rpx;
				.nickname{
					color: #16306d;
					font-size: 30rpx;
				}
				.content{
					// margin-top: 12rpx;
					font-size: 26rpx;
					line-height: 42rpx;
				}
				.img-list{
					display: block;
					margin-top: 14rpx;
					.img{
						display: inline-block;
						width: 150rpx;
						height: 150rpx;
						// background-image: url(../../../static/public/images/bg_bubbles.png);
						background-position: center; /* 水平居中 */
					    background-size: 100% auto; /* 水平100%，垂直自动 */
					    background-repeat: no-repeat; /* 防止背景图像重复 */
						margin-right: 20rpx;
						margin-bottom: 10rpx;
						// image{
						// 	width: 190rpx;
						// 	height: 190rpx;
						// }
						&:nth-child(3n){
							margin-right: 0rpx;
						}
					}
					.one{
						width: 300rpx;
						// height: 300rpx;
					}
					.four{
						margin-right: 20rpx;
						&:nth-child(2){
							margin-right: 150rpx;
						}
						&:nth-child(3){
							margin-right: 20rpx;
						}
					}
				}
				.video{
					video{
						width: 510rpx;
					}
				}
				.goods{
					.cover{
						position: relative;
						image{
							width: 230rpx;
							height: 400rpx;
						}
						.play{
							position: absolute;
							top: 245rpx;
							left: 150rpx;
							width: 70rpx;
							height: 70rpx;
							z-index: 99;
						}
					}
					.relation{
						display: inline-block;
						margin-top: 10rpx;
						border: 1px solid #e1e1e1;
						padding: 10rpx;
						border-radius: 10rpx;
						// width: 610rpx;
						background-color: #edeff1;
						font-size: 24rpx;
						text{
							margin-left: 20rpx;
							color: #fb6c6c;
						}
						.goods-img{
							margin-right: 20rpx;
							image{
								width: 100rpx;
								height: 100rpx;
								border-radius: 6rpx;
							}
						}
						.goods-info{
							.title{
								width: 470rpx;
								font-size: 30rpx;
							}
							.price{
								color: #FF0000;
								margin-top: 10rpx;
							}
						}
					}
				}
				.op{
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999;
					margin: 20rpx 0;
					text{
						position: relative;
						top: -2rpx;
						margin-left: 4rpx;
					}
				}
			}
		}
	}
	.emptys{
		margin-top: 200rpx;
	}
</style>
